<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Feeds</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/toastr.min.css') }}">

    <script src="{{ url_for('static', filename='resources/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/toastr.min.js') }}"></script>
    <script src="{{ url_for('static', filename='resources/socket.io.js') }}"></script>


    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 左栏，占20%宽度 -->
            <div class="col-lg-2 col-md-3 col-sm-12">
                <h4>Control</h4>
               
            </div>

            <!-- 右栏，占80%宽度，显示摄像头 -->
            <div class="col-lg-10 col-md-9 col-sm-12">
                <h4>Camera List</h4>

                <div class="row g-3" id="camera-feed-container">
                    <!-- 摄像头实时画面将动态插入到这里 -->

                    {% for camera_id in camera_ids %}
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card">
                            <img id="camera_{{ camera_id }}" class="card-img-top" alt="Camera {{ camera_id }}">
                            <div class="card-body">
                                <h5 class="card-title">Camera {{ camera_id }}</h5>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>
                <button class="btn btn-primary mt-4" onclick="takeSnapshot()">Capture All</button>
            </div>
        </div>
    </div>


    <script>
        toastr.options = {
            "closeButton": true,
            "positionClass": "toast-top-center"
        }

        const socket = io();

        // 接收到后端的摄像头画面
        /*
        socket.on('camera_feeds', function(feeds) {
            for (const [camera_id, image] of Object.entries(feeds)) {
                const imgElement = document.getElementById(`camera_${camera_id}`);
                if (imgElement) {
                    imgElement.src = 'data:image/jpeg;base64,' + image;
                }
            }
        });
        */
        
        // 接收来自服务器的二进制帧数据
        socket.on('camera_feeds', (feeds) => {

            for (const [camera_id, image] of Object.entries(feeds)) {
                const blob = new Blob([image], { type: 'image/jpeg' });
                const url = URL.createObjectURL(blob);
                document.getElementById(`camera_${camera_id}`).src = url;
            }
        });

        // 抓拍所有摄像头
        function takeSnapshot() {
            fetch('/snapshot')
                .then(response => response.text())
                .then(data => toastr["success"]('照片已保存.'));
        }

        // 每隔500毫秒请求一次摄像头画面
        setInterval(function() {
            socket.emit('request_camera_feeds');
        }, 500);
    

   
    </script>


</body>
</html>
